<template>
  <div>
    <!-- 头部标签 -->
    <van-nav-bar fixed>
      <template #left>
        <!-- .代表文件所在文件夹(Home文件夹) -->
        <!-- ..上一级(views文件夹) -->
        <!-- ../.. 上一级的上一级(src文件夹) -->
        <!-- <img class="logo" src="../../assets/logo.png" alt=""> -->
        <img class="logo" :src="imgObj" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="white" @click="$router.push({path: '/search'})"/>
      </template>
    </van-nav-bar>

    <div class="main">
      <!-- 频道导航 -->
      <van-tabs
        v-model="active"
        animated
        sticky
        offset-top="1.22666667rem"
        @click="channelClickFn"
      >
        <!-- 每次循环都是独立执行, 所以运行后, 这段代码会产生多个 -->
        <van-tab
          :title="item.name"
          v-for="item in channelList"
          :key="item.id"
          :name="item.id"
        >
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              offset="50"
            >
              <ArticleList :arr="articleList" @re="removeFn"></ArticleList>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>

      <!-- +号图标(编辑频道) -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="show = true"/>
    </div>

    <!-- 频道编辑弹出层 -->
    <van-popup v-model="show" @close="$refs.edit.show = false">
      <!-- 内容又自己用div框起来了 -->
      <div class="popup-container">
        <!-- 弹出层的主体区域 -->
        <div class="pop-body">
          <ChannelEdit :userChannelList="channelList" @closePop="show = false"
          @ccid="ccidFn"
          ref="edit"></ChannelEdit>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 问题1: @路径问题
// @ 只是JS中使用的别名 (webpack设置的别名, @代表的src绝对地址)
// html和css里都直接写相对路径即可
// 问题2: html里size大小适配
// postcss只负责css代码, 转换不了html里的size属性值
// 自己写rem
// 问题3: 在JS中引入图片对象
// webpack会把一切都认为是模块(包括图片文件/字体文件/...)
import theImg from '@/assets/logo.png' // 图片导入

import {
  userChannelListAPI,
  articleListAPI,
  articleDislikeAPI,
  articleReportsAPI
} from '@/api'
import ArticleList from './ArticleList.vue' // 文章列表组件
import ChannelEdit from './ChannelEdit.vue' // 编辑频道组件

import { toTimeAgo } from '@/utils/date'
export default {
  data () {
    return {
      imgObj: theImg, // logo图片
      active: 0, // 默认频道选中
      channelList: [], // 频道数组
      articleList: [], // 文章数组
      channelId: 0, // 频道ID(默认0就是推荐频道)
      loading: false, // 底部加载状态
      finished: false, // 底部是否全部加载完成
      nextTime: null, // 下一页第一条发布时间
      isLoading: false, // 顶部刷新加载状态
      show: false // 编辑频道弹出层popup显示与否
    }
  },
  async created () {
    const res = await userChannelListAPI()
    this.channelList = res.data.data.channels
    this.getArticleList() // 网页打开的时候先请求一次文章列表
  },
  methods: {
    toTimeAgo,
    // toTimeAgo: function(){}
    // toTimeAgo: toTimeAgo
    // 获取文章列表
    async getArticleList () {
      const res2 = await articleListAPI({
        channelId: this.channelId,
        timestamp: this.nextTime
      })
      if (res2.data.data.results.length === 0) {
        this.finished = true
        return // 阻止代码继续向下
      }
      // 数据的预处理
      // 后台返回的数据无法直接使用
      // 提前对数据转换
      res2.data.data.results.forEach((obj) => {
        obj.pubdate = this.toTimeAgo(obj.pubdate)
      })
      // 把下一页和上一次数组合并起来
      this.articleList = [...this.articleList, ...res2.data.data.results]
      // 为了一会getArticleList再触发, 可以传下一页的时间请求下一页数据
      this.nextTime = res2.data.data.pre_timestamp
      // console.log(res2)
      // console.log(this.toTimeAgo('2021-06-31 18:00:00'))
      // 底部加载完成
      this.loading = false
      // 顶部加载完成
      this.isLoading = false
    },

    // 频道点击事件
    channelClickFn (channeId) {
      // channeId就拿到了van-tab身上绑定的name的值(频道ID-注意有点像索引但不是)
      this.channelId = channeId // 获取到频道ID保存到data变量上
      // 切换频道, 应该让数组清空/页码回到第一页
      this.nextTime = null // 请求第一页的数据
      this.articleList = [] // 把原来的数据都清空
      this.getArticleList()
    },
    // 底部加载更多
    onLoad () {
      if (this.articleList.length === 0) {
        // this.loading = false // list组件上来, 加载中, 没有数据这次先关掉加载中状态
        return
      }
      this.getArticleList() // 再调用文章列表请求方法
    },
    // 顶部刷新
    onRefresh () {
      this.nextTime = null // 请求第一页的数据
      this.articleList = [] // 把原来的数据都清空
      this.getArticleList() // 再次发起文章请求
      console.log(123)
    },
    // 反馈 - 删除
    async removeFn (item, action) {
      // item文章对象
      /** **********前端本地删除******************** */
      const index = this.articleList.findIndex((val) => {
        // return条件: 遍历的文章对象的id和要删除的文章对象的id相同, 停止循环,直接返回遍历时这个文章对象的索引值
        return val.art_id === item.art_id
      })
      // 如果找不到就返回-1
      if (index !== -1) {
        this.articleList.splice(index, 1)
      }
      /** ****************************** */

      /** *************接口调用***************** */
      if (action.name === '不感兴趣') {
        const res = await articleDislikeAPI({
          artId: item.art_id
        })
        console.log(res)
      } else {
        // 点的是二级面板(反馈)
        const res = await articleReportsAPI({
          artId: item.art_id,
          type: action.value // 反馈类型
        })
        console.log(res)
      }

      // 正常思路: 反馈成功删除某个文章
      // 正常来说:
      // 后台会给你返回一个新的数据对象
      // 补充到下面

      // 现在1:
      // 反馈成功, 直接刷新第一页的数据重新加载
      // this.articleList = []
      // this.nextTime = null
      // this.getArticleList()

      // 现在2:
      // 数组长度剩余5个, 让下面补充10个新的
      // this.getArticleList()
    },
    // 切换频道
    async ccidFn (obj) { // obj频道对象
      // tabs的v-model可以控制默认显示哪一个
      // 默认值确实是索引, 但是tab有name, 默认绑定的是name的值
      // name的值是频道ID
      // 我要给v-model对应的变量赋予频道id
      this.active = obj.id
      this.channelClickFn(obj.id) // 重新获取数据(默认一次点击频道事件)
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  }
}
// 问题: 用完list组件, 发现文章id重复了
// => 文章数据在页面重复了, 也就证明数组里的数据有2份一样的
// => 思考: 数据哪里请求的?
// => getArticleList, 一个created里发起, 一个是onLoad发起
// => 怀疑: onLoad上来也走了, 打印一下, 看看发现确实onLoad执行了
// => 思考原因: 文章数据异步请求, DOM先加载, list组件(没有内容就没有高度)上来就认为触底了, 执行onLoad
// 解决方案: onLoad判断, 如果数组长度为0, 就先不加载onLoad网络请求
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
// 内容区域
.main {
  padding-top: 46px;
}

// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

.van-popup{
  width: 100%;
  height: 100%;
}
</style>
